<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<style>
    div.content-top-banner  .mui-slider-item span.tit{
        height: 100%;
        font-size: 28px;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .mui_comm_ul{
        border-top: 0;
    }
    .focus_author{
        border-bottom: 0.8rem solid #f1f1f1;
    }
    .mui_comm_ul .mui_comm_li.focused{
        color:red;
    }
</style>
<!--content-list-wrap-->
<div class="content-list-wrap">
    <div class="mui-content mui-scroll-wrapper" id="contentListWrap">
        <div class="mui-scroll">
            <div class="inner-list">
                <!--content-top-banner-->
                <div id="banner"></div>
                <!--/content-top-banner-->
                <%--<div id="contentList"></div>--%>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="tpl-top">
    {{each resultList.list as value}}
        <div class="focus_author">
            <div class="content-top-banner">
                <div class="mui-slider" id="muiSlideList">
                    <div class="mui-slider-group">
                        <div class="mui-slider-item">
                            <a data-id="{{value.id}}" class="thumb"><img style="width: 100%" src="{{value.head_url}}"/></a>
                            <span class="tit">{{value.unit_name}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <ul class="mui_comm_ul">
                    <li class="mui_comm_li left" data-id="{{value.id}}" id="viewAll">
                        <span>查看全部</span>
                    </li>
                    <li class="mui_comm_li right" data-id="{{value.id}}" id="focus" >
                        <span>取消关注</span>
                    </li>
                </ul>
            </div>
            {{each value.list as info}}
            <a data-id="{{info.id}}" class="list-row {{if info.theme_img3}}three-row{{/if}}">
                <div class="inner">
                    <div class="item text">
                        <h2>{{info.title}}</h2>
                        {{if !info.theme_img3}}
                        <p class="tag">
                            <span>{{formatTime info.create_time}}</span>
                            <span>{{info.name}}</span>
                        </p>
                        {{/if}}
                    </div>
                    <div class="item thumb">
                        {{if info.theme_img1}}
                        <span class="cell"><img src="{{info.theme_img1}}" alt=""></span>
                        {{/if}}
                        {{if info.theme_img2}}
                        <span class="cell"><img src="{{info.theme_img2}}" alt=""></span>
                        {{/if}}
                        {{if info.theme_img3}}
                        <span class="cell"><img src="{{info.theme_img3}}" alt=""></span>
                        {{/if}}
                    </div>
                    {{if info.theme_img3}}
                    <div class="item bottom">
                        <p class="tag">
                            <span>{{formatTime info.create_time}}</span>
                            <span>{{info.name}}</span>
                        </p>
                    </div>
                    {{/if}}
                </div>
            </a>
            {{/each}}
        </div>
    {{/each}}
</script>

<script>
    var _textIndex = 1, total_page = 0;

    //上拉加载数据
    function pullUp2Refresh() {
        var _this = this;
        //如果存在数据，则继续添加数据
        if (_textIndex < total_page) {
            $.ajax({
                url: _basePath + "/app/member/focusList",
                data: {
                    curPage: _textIndex + 1,
                },
                dataType: 'json',
                success: function (data) {
                    total_page = data.resultList.totalPage;
                    var _html = template('tplList', data);
                    $("#contentList").append(_html);

                    _textIndex++;

                    //如果存在数据，则继续添加数据
                    if (_textIndex < total_page) {
                        _this.endPullupToRefresh(false);
                    } else {
                        _this.endPullupToRefresh(true);
                    }
                }
            });

        } else {
            _this.endPullupToRefresh(true);
        }

    }
    
    function loadBanner() {
        $.ajax({
            url: _basePath + "/app/member/focusList",
            dataType: 'json',
            success: function (data) {
                if(typeof data.resultList != undefined && data.resCode == 0) {
                    var _html = template('tpl-top', data);
                    $("#banner").append(_html);
                    focusEvent();
                    initPullUp();
                }
            }
        });
    }


    $(function () {
        loadBanner();
    });
    
    function focusEvent() {
        //关注
        mui('body').on("tap", "#focus",function () {
            var _ele= $(this),_id = _ele.data("id");
            $.ajax({
                url: _basePath + "/app/member/focus",
                data: {
                    unit_id: _id
                },
                dataType: 'json',
                success: function (data) {
                    if(undefined != typeof data.resCode && data.resCode == 0) {
                        var _goodHover = 'focused';
                        if(_ele.hasClass(_goodHover)){
                            _ele.removeClass(_goodHover);
                            _ele.text("取消关注");
                            mui.toast("关注成功");
                        }else{
                            _ele.addClass(_goodHover);
                            _ele.text("点击关注");
                            mui.toast("取消成功");
                        }
                    }else{
                        mui.toast(data['message']);
                    }
                }
            });
        })

        //查看全部
        mui('body').on("tap", "#viewAll",function () {
            var _id = $(this).data("id");
            mui.openWindow({
                url: _basePath + "app/page?pv=info_author&id=" + _id
            })
        });

        //查看详情
        mui('body').on('tap', 'a.list-row', function () {
            mui.openWindow({
                url: "<%=basePath%>app/page?pv=info_detail&id=" + $(this).data("id")
            })
        });
    }

    function initPullUp() {
        //初始化上拉加载
        mui.init({
            pullRefresh: {
                container: 'div#contentListWrap',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
                up: {
                    height: 50,//可选.默认50.触发上拉加载拖动距离
                    auto: true,//可选,默认false.自动上拉加载一次
                    contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
                    contentnomore: '我是有底线的',//可选，请求完毕若没有更多数据时显示的提醒内容；
                    callback: pullUp2Refresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                }
            }
        });
    }
</script>
